<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="联系人" prop="keyWord">
        <el-input :style="{width:'150px'}" v-model="queryParams.keyWord" placeholder="请输入姓名/电话" clearable size="small" />
      </el-form-item>
      <el-form-item label="经销商" prop="dealerId">
        <el-select v-model="queryParams.dealerId" placeholder="请选择" clearable size="small">
        <el-option v-for="type in dealerList" :key="type.dealerId" :label="type.dealerName" :value="type.dealerId" />
       </el-select>
      </el-form-item>

      <el-form-item label="中介人" prop="agentId">
        <el-select :style="{width:'150px'}" v-model="queryParams.agentId" placeholder="请选择" clearable size="small">
          <el-option v-for="type in agentList" :key="type.id" :label="type.nickName" :value="type.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="地区" prop="area">
        <CityPicker :withAll="true" ref="cityPicker" size="small" clearable placeholder="请选择" v-model="queryParams.area" />
      </el-form-item>

      <el-form-item label="时间段" prop="orderStartDate">
        <el-date-picker
          v-model="queryParams.orderStartDate"
          type="datetime"
          placeholder="选择开始日期时间">
        </el-date-picker>

      </el-form-item>
    <el-form-item prop="orderEndDate">
      <el-date-picker
        v-model="queryParams.orderEndDate"
        type="datetime"
        placeholder="选择结束日期时间">
      </el-date-picker>
    </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="list">
      <el-table-column label="订单号" prop="orderCode" :show-overflow-tooltip="true" />
      <el-table-column label="联系人" prop="userName" :show-overflow-tooltip="true" />
      <el-table-column label="联系电话"  prop="phoneNumber"  :show-overflow-tooltip="true" />
      <el-table-column label="经销商" prop="dealerName" :show-overflow-tooltip="true" />
      <el-table-column label="中介人" prop="agentName" :show-overflow-tooltip="true" />
      <el-table-column label="中介提成比例（%）" :formatter="agentRateFormat" prop="agentRate"  :show-overflow-tooltip="true" />
      <el-table-column label="定金支付状态" :formatter="stateFormat" prop="paymentStatus" :show-overflow-tooltip="true" />
      <el-table-column label="定金金额（元）" :formatter="amoutFormat"  prop="amount" :show-overflow-tooltip="true" />
      <el-table-column label="预约时间"  prop="orderDate" :show-overflow-tooltip="true" />
      <el-table-column label="工单进度" :formatter="statusFormatter" prop="status" :show-overflow-tooltip="true" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.row)" v-hasPermi="['gongyuan:order:byid']">详情</el-button>
          <el-button class="gongyuan-delete" size="mini" type="text" icon="el-icon-delete" @click="handleDeleteData(scope.row)" v-hasPermi="['gongyuan:supervision:disable']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

  </div>
</template>

<script>
  import { getOrderList} from '@/api/order/order'
  import { getDealerList } from '@/api/dealer/index'
  import { getAgentList } from '@/api/agent/agent'
  import CityPicker from '@/components/cityPicker'
  export default {
        name: "Orderlist",
    components: {
      CityPicker
    },
      data() {
        return {
          // 遮罩层
          loading: true,
          list: [],
          total: 0,
          // 查询参数
          queryParams: {
            keyWord: '',
            status:undefined,
            dealerId:undefined,
            agentId:undefined,
            userProvince:'',
            userCity:'',
            userArea:'',
            orderStartDate:'',
            orderEndDate:'',
            pageNum: 1,
            area:[],
            pageSize: 10
          },
          dealerList:[],
          agentList:[],

          orderStatus:[]
        }
      },
      created() {
        this.initDictsOptions('order_status', 'orderStatus')
        this.getDealerListData();
        this.getAgentListData();
        this.getList()
      },
      methods:{
        async initDictsOptions(dicts, listProps) {
          try {
            const res = await this.getDicts(dicts)
            if (res.code === 200) {
              this[listProps] = res.data.map((per) => ({
                label: per.dictLabel,
                value: per.dictValue
              }))
            }
          } catch (error) {
            console.log(error)
          }
        },
          async getList() {
            let cityObj
            if (!this || !this.$refs.cityPicker) {
              cityObj = {
                province: '',
                city: '',
                area: ''
              }
            } else {
              cityObj = this.$refs.cityPicker.getValueTextObj(this.dealerAddress)
            }
            this.loading = true
            const res = await getOrderList({
              ...this.queryParams,
              userProvince: `${cityObj.province}`,
              userCity: `${cityObj.city}`,
              userArea:`${cityObj.area}`
            })
            this.list = res.rows
            this.total = res.total
            this.loading = false
          },
        async getDealerListData(){
          const res = await getDealerList({pageNum:1,pageSize:100000})
          this.dealerList = res.rows
        },
        async getAgentListData(){
          const res = await getAgentList({pageNum:1,pageSize:100000})
          this.agentList=res.rows;
        },
        stateFormat(row, column) {
         return row.paymentStatus;
        },
        statusFormatter(row){
          const obj = this.orderStatus.find((item) => item.value === row.status) || { label: '' }
          return obj.label
        },
        amoutFormat(row, column){
            return row.amount+'';
        },
        agentRateFormat(row, column){
            return row.agentRate
        },
        handleAdd() {
          // 此处后台管理添加的路由, path对应组件name须一致,不可再修改
          this.$router.push({ name: 'Supervisionedit' })
        },
        handleEdit(row) {
          this.$router.push({ name: 'Supervisionedit', query: { id: row.id } })
        },
        handleDetail(row){
          this.$router.push({ name: 'Orderdetail', query: { id: row.orderId } })
        },
        handleDeleteData(row){
          const superId=row.id
          this.$confirm('是否确认删除监管用户编号为"' + superId + '"的数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return removeSupervision(superId);
          }).then(() => {
            this.getList();
            this.msgSuccess("删除成功");
          }).catch(function() {});
        },
        handleDelete(row,status){
          const superId=row.id
          this.$confirm('是否确认禁用监管用户编号为"' + superId + '"的数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return delSupervision({id:superId,status:status});
          }).then(() => {
            this.queryParams.pageNum = 1
            this.getList();
            this.msgSuccess("操作成功");
          }).catch(function() {});
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.resetForm('queryForm')
          this.handleQuery()
        }
      }
    }
</script>

<style scoped>

</style>
